<template>
    <div class="animate-box">
        <div class="box">
            <img src="../../../assets/images/big.jpg" alt="" class="big">
            <transition name="fade1">
                    <img src="../../../assets/images/left.jpg" alt="" class="left" v-if="$store.state.isFlag==2" @click="target1">
            </transition>
            <transition name="fade2">
                <img src="../../../assets/images/more.jpg" alt="" class="more" v-if="$store.state.isFlag==2" @click="target2">
            </transition>
            <transition name="fade3">
                <img src="../../../assets/images/word.png" alt="" class="word" v-if="$store.state.isFlag==2">
            </transition>
        </div>
        <div class="toBottom"  @click="nextSlide"></div>
    </div>
</template>

<script>
    export default {
        name: "animate",
        data(){
            return{
                isClick: false,
                isClick1: false,
                inter1: "",
                inter2: "",
            }
        },
        methods: {
            target1(){
                this.$router.push({path:'/detail',query:{id:69,index:0,title:1}})
            },
            target2(){
                this.$router.push('/news')
            },
            nextSlide(){
                this.$store.state.imgPic.slideNext();
            }
            // show() {
            //     this.inter1 = setInterval(() => {
            //         this.isClick = true
            //     }, 1000)
            //     this.inter2 = setInterval(() => {
            //         this.isClick1 = true
            //     }, 3000)
            // }
        },
        created() {
            // this.show();
            // console.log(this.$store.state.isFlag)
        },
    }
</script>

<style scoped>
    .animate-box{
        height: 100vh;
        background: black;
    }
    .box {
        position: relative;
        width: 1100px;
        height: 670px;
        margin: auto;
    }

    .big {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 691px;
        height: 596px;
    }

    .left {
        position: absolute;
        right: -50px;
        bottom: 290px;
        width: 614px;
        height: 307px;
    }

    .more {
        position: absolute;
        right: -50px;
        bottom: -17px;
        width: 614px;
        height: 307px;
    }

    .word {
        position: absolute;
        left: 0;
        bottom: -15px;
    }
    .fade1-enter{
        opacity: 0;
        transform: translateX(600px);
    }
    .fade1-enter-active,.fade1-leave-active{
        transition: all 1.5s linear;
    }
    .fade2-enter{
        opacity: 0;
    }
    .fade2-enter-active,.fade2-leave-active{
        transition: all 1.5s linear 1.5s;
    }
    .fade3-enter{
        opacity: 0;
    }
    .fade3-enter-active,.fade3-leave-active{
        transition: all 1.5s linear 1.5s;
    }
    button{
        position: relative;
        top: -630px;
        left: 0;
        width: 100px;
        height: 100px;
    }
    .toBottom{
        width: 250px;
        height: 120px;
        background-image: url("../../../assets/images/white.png");
        background-size: 100% 100%;
        position: fixed;
        opacity: 0.4;
        /*bottom: -49px;*/
        bottom: -1463px;
        left: 656px;
        z-index: 10000;
    }
    .toBottom:hover{
        background-image: url("../../../assets/images/blue.png");
        background-size: 100% 100%;
    }
</style>